<template>
  <div class="caitent">
    <el-button class="right" size="small" type="primary" @click="addRoles">添加角色</el-button>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="title"
        label="角色名称"
        width="333"
      />
      <el-table-column
        prop="description"
        label="角色描述"
        width="333"
      />
      <el-table-column
        label="操作"
      >
        <template v-slot="{row}">
          <el-button size="small" type="success" @click="autDistribution(row.id)">分配权限</el-button>
          <el-button size="small" type="primary" @click="editRoles(row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddDialog ref="role" :show-dialog.sync="showDialog" @updateEvent="getRoles" />
    <!-- 分配权限 -->
    <AutDistribution ref="autDistribution" :show-dialog.sync="visibleDialog" />
  </div>
</template>

<script>
import AddDialog from './components/add-roles.vue'
import { getRoles, delRoles } from '@/api/roles'
import AutDistribution from './components/aut-distribution.vue'
export default {
  components: {
    AddDialog,
    AutDistribution
  },
  data() {
    return {
      visibleDialog: false,
      tableData: [],
      showDialog: false
    }
  },
  async created() {
    await this.getRoles()
  },
  methods: {
    // 分配权限
    autDistribution(id) {
      this.visibleDialog = true
      // 调用子组件的函数 获取默认的角色的权限列表
      this.$refs.autDistribution.getRolePerm(id)
    },
    editRoles(id) {
      this.showDialog = true
      this.$refs.role.title = '编辑角色'
      this.$refs.role.getRolesId(id)
    },
    delFn(id) {
      this.$confirm('确定删除此角色吗?', '删除', {
        type: 'warning'
      }).then(async() => {
        console.log(id)
        await delRoles(id)
        this.getRoles()
      }).catch(() => {
        console.log('取消删除')
      })
    },
    addRoles() {
      this.showDialog = true
      this.$refs.role.title = '新增角色'
    },
    async getRoles() {
      const res = await getRoles()
      this.tableData = res.data
      console.log(res, 15)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table--border{
  margin: 15px;
}
.right{
  margin-left: 962px;
  margin-top: 20px;
}
</style>
